<template>
  <div class="info_wrap">
    <p class="title_line">
      <span>学生基本信息</span>
    </p>
    <ul class="info_ul">
      <li class="asterisk">
        <label>学生姓名:</label>
        <input
          type="text"
          placeholder="请填写报名学生姓名（与户口一直）"
          class="long"
        />
      </li>
      <li class="asterisk">
        <label>性别:</label>
        <input type="radio" name="student_sex" class="my-radio" /><em>男</em>
        <input type="radio" name="student_sex" class="my-radio" /><em>女</em>
      </li>
      <li class="asterisk">
        <label> 出生日期: </label>
        <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
      </li>
      <li class="asterisk">
        <label> 身份证类型: </label>
        <select name="student_certificate_type" class="long">
          <option value="-1">居民身份证</option>
        </select>
      </li>
      <li class="asterisk">
        <label>身份证号码:</label>
        <input type="text" placeholder="请填写学生身份证号码" class="long" />
      </li>
    </ul>

    <p class="title_line">
      <span></span>
    </p>
    <ul class="info_ul">
      <li class="my-center">
        <label class="asterisk">疫苗接种证明:</label>
        <el-upload
          class="file-upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </li>
    </ul>

    <p class="title_line">
      <span></span>
    </p>
    <ul class="info_ul">
      <li class="my-center">
        <label class="asterisk">学前教育证明:</label>
        <el-upload
          class="file-upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "StudentBasicInfo",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.main_content {
  width: 1000px !important;
  margin-top: 80px !important;
  margin-bottom: 60px;
}

.file-upload {
  display: inline-block;
  width: 50px;
}

.file-upload /deep/ .el-upload--picture-card,
.file-upload /deep/ .el-upload-list--picture-card .el-upload-list__item {
  line-height: 100px;
  font-size: 12px;
  height: 100px;
  width: 100px;
  position: relative;
  background: #f8f8f8;
  border: 1px solid #d2d2d2;
  border-radius: 0;
}

.asterisk::after {
  content: "*";
  color: red;
  padding-left: 10px;
  font-size: 15px;
}

em {
  width: 30px;
  padding-left: 5px;
  padding-right: 10px;
}
.min {
  width: 90px;
  height: 30px;
  margin-right: 13px;
}
.middle {
  width: 200px;
  height: 30px;
}

.my-center {
  height: 100px;
  line-height: 100px;
}
</style>